<template>
	<view class="a1">
		<view class="a2">
			
			<view class="a3">
				<view class="a4">{{dictName}}</view>
				<image class="a5" src="../img/icon24关闭.png" @click="loginout"></image>
				<!-- <view class="bell" @click="remindBounced"></view> -->
			</view>
			
			<view class="a11"><image class="aw3" src="../img/个人用户.png"></image></view>
			<view class="a12">{{userName}}</view>
			<view class="a13">{{nowTime}}</view>
		</view>
		
		<view class="b1">
			<view style="width: 100%;height: 1px;"></view>
			<view class="b2">
				<navigator :url="'./diagnostics/diagnostics?well_id='+well_id">
				<image class="b3" src="../img/Slice2.png"></image>
				<view class="b3-1">工艺诊断</view>
				</navigator>
			</view>
			<view class="b4">
				<navigator :url="'./configuration/configuration?well_id='+well_id+'&well_name='+well_name+'&dictName='+dictName">
				<image class="b3" src="../img/Slice3.png"></image>
				<view class="b3-1">工艺组态</view>
				</navigator>
			</view>
			<view class="b6" >
				<navigator :url="'.//pages/chart/zschart?well_id='+well_id+'&well_name='+well_name">
					<image class="b3" src="../img/Slice4.png"></image>
					<view class="b3-1">趋势曲线</view>
				</navigator>
			</view>
			
			<view class="b7">
				<navigator :url="'./reportForms/reportForms?well_id='+well_id">
				<image class="b3" src="../img/Slice6.png"></image>
				<view class="b3-1">生产报表</view>
				</navigator>
			</view>
			<view class="b8" @click="modalTap()">
				<image class="b3" src="../img/Slice7.png"></image>
				<view class="b3-1">工艺参数</view>
			</view>
			<view class="b9" ><!-- @click="alarm" -->
				<navigator :url="'./warnings2/warnings2?well_id='+well_id+'&well_sd='+info.ORG_NAME" class="content-B">
				<image class="b3" src="../img/Slice5.png"></image>
				<view class="b3-1">告警信息</view>
				</navigator>
			</view>
		</view>
		<view class="c1">
			<view style="width: 100%;height: 2rpx;"></view>
			<view class="c1_1">• 井号</view>
			<view class="c1_2">{{info.jmjh}}</view>
			<view class="c2"></view>
			<view class="c1_1">• 单位</view>
			<view class="c1_2">{{info.ORG_NAME}}</view>
			<view class="c2"></view>
			<view class="c1_1">• 通信状态</view>
			<view class="c1_2"><view class="txzc22" v-if="status===0"></view>
						<view class="txbzc22" v-else="status===1"></view>
			</view>
			<view class="c2"></view>
			<view class="c1_1">• 阀后压力(MPa)</view>
			<view class="c1_2">{{info.fhyl}} </view>
			<view class="c2"></view>
			<view class="c1_1">• 套压(MPa)</view>
			<view class="c1_2">{{info.ty}}</view>
			<view class="c2"></view>
			<view class="c1_1">• 油压(MPa)</view>
			<view class="c1_2">{{info.yy}} </view>
			<view class="c2"></view>
			<view class="c1_1">• 限位器井斜角(°)</view>
			<view class="c1_2">{{info.kdqkjxj}} </view>
			<view class="c2"></view>
			<view class="c1_1">• 采气树主通径</view>
			<view class="c1_2">{{info.cqsztj}}</view>
			<view class="c2"></view>
			<view class="c1_1">• 油管内径(mm)</view>
			<view class="c1_2">{{info.ygnj}}</view>
			<view class="c2"></view>
			<view class="c1_1">• 厂家</view>
			<view class="c1_2">{{info.cj}}</view>
		</view>
		<view style="width: 100%;height: 20rpx;"></view>
	<view>
		<uni-popup ref='popup2' type="right" background-color="#fff">
			<view @click="guanbi">关闭</view>
			<scroll-view class="scroll-y12" scroll-y="true">
			<view v-for="(item,index) in emergency">
					<view>{{item}}</view>
					<view>查看</view>
			</view>
			</scroll-view>	
		</uni-popup>
		
		<button @click='openPopup()'></button>
		<uni-popup ref='popup' type="center" background-color="#fff">
			 <view class="popupshow">
			        <!-- 标题 -->
			        <view style="text-align: center">
			            <text class="title">{{ well_name +"-工艺参数" }}</text>
			        </view>
					<scroll-view class="uni-swiper-tab" scroll-y  style="height: 800rpx;">
					<view class="contnet">
						<view class="item">
							<view class="titles">柱塞类型</view>
							<view class="nr">{{gycs.zslx}}</view>
						</view>
						<view class="item">
							<view class="titles">井深(m)</view>
							<view class="nr">{{gycs.js}}</view>
						</view>
						<view class="item">
							<view class="titles">柱塞长度(mm)</view>
							<view class="nr">{{gycs.zscd}}</view>
						</view>
						<view class="item">
							<view class="titles">柱塞外径(mm)</view>
							<view class="nr">{{gycs.zswj}}</view>
						</view>
						<view class="item">
							<view class="titles">限位器类型</view>
							<view class="nr">{{gycs.kdqName}}</view>
						</view>
						<view class="item">
							<view class="titles">限位器长度(m)</view>
							<view class="nr">{{gycs.kdqcd}}</view>
						</view>
						<view class="item">
							<view class="titles">限位器井斜角(°)</view>
							<view class="nr">{{gycs.kdqkjxj}}</view>
						</view>
						<view class="item">
							<view class="titles">限位器斜深(m)</view>
							<view class="nr">{{gycs.kdqxs}}</view>
						</view>
						<view class="item">
							<view class="titles">限位器垂深(m)</view>
							<view class="nr">{{gycs.kdqcs}}</view>
						</view>
						<view class="item">
							<view class="titles">油管内径(mm)</view>
							<view class="nr">{{gycs.ygnj}}</view>
						</view>
						<view class="item">
							<view class="titles">套管外径(mm)</view>
							<view class="nr">{{gycs.tgwj}}</view>
						</view>
						<view class="item">
							<view class="titles">A靶点斜深(m)</view>
							<view class="nr">{{gycs.abdxs}}</view>
						</view>
						<view class="item">
							<view class="titles">A靶点垂深(m)</view>
							<view class="nr">{{gycs.abdcs}}</view>
						</view>
						<view class="item">
							<view class="titles">B靶点斜深(m)</view>
							<view class="nr">{{gycs.bbdxs}}</view>
						</view>
						<view class="item">
							<view class="titles">B靶点垂深(m)</view>
							<view class="nr">{{gycs.bbdcs}}</view>
						</view>
						<view class="item">
							<view class="titles">采气树主通径(mm)</view>
							<view class="nr">{{gycs.cqsztj}}</view>
						</view>
						<view class="item">
							<view class="titles">厂家</view>
							<view class="nr">{{gycs.cj}}</view>
						</view>
						<view class="item">
							<view class="titles">运行状态</view>
							<view class="nr">{{gycs.status}}</view>
						</view>
					</view>
					</scroll-view>
			    </view>
			<button @click="closePopup" style="font-size: 30rpx;">关闭</button>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	var _self ;
	export default {
		data() {
			return {
				searchValue2:{
					dwId:'',
					jmjh:'',
					ptId:'',
					cjId:'',
					pylx:'',
				},
				platform: [{tname:""}],
				unit: [],
				ptList: [],
				wellList: [],
				searchValue:{
					orgId: '',
					ptId: '',
					wellId: '',
					gylx:''
				},
				indexUnit: 0,
				index: 0,
				texts: [],
				wellNumber: 0,
				warningNumber: 0,
				wellname:'',
				ptJudeg:false,
				city: '',
				city2: '',
				unitss:[],
				info:[],
				well_name:"",
				well_id:"",
				gycs:[],
				nowTime:"",
				userName:"",
				dictName:"",
				status:"",
				pingtaiId:'',
				danweiId:'',
				//提醒弹框数据
				emergency:['长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理',
				'长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理',
				'长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理','长宁H4-6的异常被处理',],
			}
		},
		onLoad(option) {
			console.log(option);
			this.searchValue2.pylx = option.qjtype;
			this.searchValue.gylx = option.qjtype;
			/* console.log("告警页面");
			console.log(option); */
			_self = this;
			_self.dictName=option.dictName
			this.pingtaiId=option.ptid
			this.danweiId=option.danwei
			this.getInfoByWellId(option.well_id);	
			this.well_id=option.well_id;
			this.well_name=option.well_name;
			this.getWellList1();
			//定时器
			setInterval(function() {
				_self.dateFormat();
				}, 1000);
			this.loginName();
		},
		
		methods: {
			//pi调用
			getWellList1(){
				let url = this.$requestUrl.requestUrl('/zs')+'/app/app/list?jmjh='+this.well_name+"&dwId="+this.danweiId+
						"&ptId="+this.pingtaiId+'&gylx='+this.searchValue2.pylx
				
				let data={};
				let that=this;
				this.$api.register(url,data,'GET').then(res => {
						// 成功的操作
							/* console.log("咩咩咩咩咩咩咩咩吗");
							console.log(res); */
								res.data.forEach((item,index)=>{
								let obj={};
								obj.name=item.jmjh;
								obj.orgId=item.id;
								
								this.status=item.status;
								
							})
							
						}).catch(err => {
							console.log("nnnnnnnnn");
						// 失败的操作
						})
			},
			//关闭提醒弹框
			guanbi(){
				this.$refs.popup2.close();
			},
			//提醒弹框
			remindBounced(){
				this.$refs.popup2.open();
			},
			loginName(){
				_self.userName = uni.getStorageSync('userName')
			},
			loginout(){
				const token = uni.getStorageSync('Authorization')
				//console.log(token);
				uni.removeStorageSync('Authorization')
				uni.redirectTo({
				url:'../index/log',
				success:res =>{
					console.log("成功");
				},
				fail:(err) =>{
					console.log("失败");
					console.log(err);
					},
				complete:() => {},
				})
			},
			//当前时间
			dateFormat() {
				var timeStr = getDateTime.dateTimeStr('y年m月d日  h时i分s秒',new Date()); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
				this.nowTime = timeStr
			},
			//打开弹窗
			openPopup(){
				this.$refs.popup.open();
			},
			// 关闭弹出层
			closePopup(){
				this.$refs.popup.close();
			},
			modalTap(){
				let that=this;
				//let url='9011/app/app/zscs/'+this.well_id;
				let url=this.$requestUrl.requestUrl('/zs')+'/app/app/zscs/'+this.well_id;
				this.$api.register(url,'GET').then(res => {
					this.gycs=res.data.data;
					console.log(this.gycs);
					this.openPopup()
						}).catch(err => {
							
						})
			},
			getInfoByWellId(wellId){
				//let url='9011/app/app/getInfoByWellId/'+wellId;
				let url=this.$requestUrl.requestUrl('/zs')+'/app/app/getInfoByWellId/'+wellId;
				let data={};
				let that=this;
				this.$api.register(url,data,'GET').then(res => {
					_self.info=res.data.data
					/* console.log(_self.info); */
						}).catch(err => {
							
						})
			},
		}
	}
</script>
<style>
	.background {
	        background-color: white;
	        border-radius: 10px;
	    }
	.c2{
		width: 670rpx;
		height: 0px;
		opacity: 1;
		border: 2rpx solid #F5EDED;
		margin-left:8rpx;
		margin-top: 18rpx;
	}
	.c1_2{
		width: 162rpx;
		height: 44rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #737373;
		line-height: 44rpx;
		margin-left:460rpx;
		margin-top: -40rpx;
	}
	.c1_1{
		width: 400rpx;
		height: 44rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #868686;
		line-height: 44rpx;
		margin-left:32rpx;
		margin-top: 40rpx;
	}
	.b9{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:531rpx;
		margin-top: -102rpx;
	}
	.b8{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:301rpx;
		margin-top: -102rpx;
	}
	.b7{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:66rpx;
		margin-top: 84rpx;
	}
	.b6{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:531rpx;
		margin-top: -102rpx;
	}
	.b4{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:301rpx;
		margin-top: -102rpx;
	}
	.b3-1{
		width: 96rpx;
		height: 24rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #737373;
		line-height: 24rpx;
		margin-top: 12rpx;
	}
	
	.b3{
		width: 96rpx;
		height: 96rpx;
	}
	.b2{
		width: 96rpx;
		height: 96rpx;
		background: #ffffff;
		border-style: dashed;
		border-color:#dadaa4;
		border-width: 4rpx;
		margin-left:66rpx;
		margin-top: 32rpx;
	}
	.c1{
		width: 92.5%;
		height: 1080rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 0px rgba(108,98,92,0.2);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-top:18rpx;
		margin-left:28rpx;//左边距
	}
	.b1{
		width: 92.5%;
		height: 376rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 0px rgba(108,98,92,0.15);
		border-radius: 12rpx 12rpx 12rpx 6rpx;
		opacity: 1;
		margin-top:-68rpx;
		margin-left:28rpx;//左边距
	}
	.a13{
		width: 320rpx;
		height: 36rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
		margin-left:180rpx;
	}
	.a12{
		width: 180rpx;
		height: 44rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #ffffff;
		margin-left:180rpx;
		margin-top:-110rpx;
	}
	.a11{
		width: 96rpx;
		height: 96rpx;
		background: rgba(255,255,255,0.4);
		opacity: 3;
		border: 6rpx solid #FFFFFF;
		margin-left:50rpx;
		margin-top:32rpx;
		/* padding-top: 20px; */
	}
	.a1{
		width: 100%;
		height: 100%;
		background: #FBF9F7;
		border-radius: 0px 0px 0px 0px;
	}
	.a2{
		width: 100%;
		height: 416rpx;
		background: linear-gradient(271deg, #F4C163 0%, #F09B00 100%);
		opacity: 1;
		border-radius:0% 0% 8% 8%;
	}
	.a3{
		width: 375px;
		height: 44px;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.a4{
		width: 200rpx;
		height: 48rpx;
		font-size: 40rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #ffffff;
		padding-left:350rpx;
		padding-top: 25px;
		
	}
	.a5{
		width: 48rpx;
		height: 48rpx;
		margin-left:620rpx;
	}
	.aw3{
		width: 96rpx;
		height: 96rpx;
		padding-left:0px;
		padding-top: 0px;
	}
	.a222{
		width: 24px;
		height: 24px;
		margin-left:300px;
		
	}
	.page {
	  position: relative;
	  width: 375px;
	  height: 812px;
	  background-color: rgba(255, 255, 255, 1);
	  overflow: hidden;
	}
	.group_5 {
	  width: 375px;
	  height: 672px;
	  margin-top: 140px;
	}
	.contnet{
		
	}
	.item{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0rpx 20px;
		margin-top: 20px;
	}
	.title{
		font-size: 36rpx;
		font-weight: 500;
	}
	.titles{
		font-size: 20rpx;
		width: 240rpx;
		/* margin-right: 20px; */
	}
	.nr{
		width: 250rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 20rpx;
		padding: 0rpx 10rpx;
		border: 2rpx solid #c0c0c0 ;
		
	}
	.popupshow{
		width: 600rpx !important;
		/* height:200px !important; */
		padding: 20rpx 0px;
	}
.bell {
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    top: 250rpx;
    left: 1080rpx;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    cursor: pointer;
}
.bell:hover {
    background-color: white;
}
.bell:before,
.bell:after {
    content: "";
    position: absolute;
    background-color: inherit;
}
.bell:before {
    border-top-right-radius: 1000px;
    border-top-left-radius: 1000px;
    width: 140%;
    height: 70%;
    top: 50%;
    left: -20%;
}
.bell:after {
    border-bottom-right-radius: 1000px;
    border-bottom-left-radius: 1000px;
    width: 50%;
    height: 25%;
    top: 130%;
    left: 25%;
}
.circle{
	color: #ffffff;
	width:100px;
	height:100px;
	border-radius:50px; /* 图形的半径 */
}	
.scroll-y12{
	height:1120rpx;
	
}
.txzc22{
		    width:50rpx;
		    height:40rpx;
		    border-radius:50%;
		    background-color:#42b983;
			margin-left: 0px;
			margin-top: 0px;
}
.txbzc22{
		      width:50rpx;
		      height:40rpx;
		      border-radius:50%;
		      background-color: #ff3f36;
			  margin-left: 0px;
			  margin-top: 0px;
}
</style>